<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,mail=yes">
	<title>Index</title>

	<script src="./js/jquery-1.8.3.min.js"></script>
	<script src="./js/swiper.min.js"></script>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<link rel="stylesheet" href="./css/iconfont.css">
	<link rel="stylesheet" href="./css/animate.css">
	<link rel="stylesheet" href="./css/swiper.min.css">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/index.css">
	<script src="./js/wow.min.js"></script>
	<script type="text/javascript" src="./js/clipboard.min.js"></script>
	<script type="text/javascript" src="./layui/layui.js"></script>
	<link rel="stylesheet" href="./css/swiper-bundle.min.css" />

</head>

<body>
	<main class="active">
		<div class="head_a1">
			<div class="layui-main">
				<div class="b1">
					<div class="t1">步驟一：活動資訊( 嘉賓介紹 )</div>
					<a href="index.html" class="back_btn"><img src="images/out.png">返回首页</a>
				</div>
			</div>
		</div>
		<div class="main_a">
			<div class="layui-main">
				<div class="active_w active3 ">
					<p class="text-align-center ft18 mb40 ft-bold">快來介紹你的嘉賓有多厲害！</p>
					<from class="layui-form">
						<div class="content">
							<ul class="layui-row layui-col-space60 ul_height a8_ul1">
								<li class="layui-col-md3 layui-col-xs4">
									<div class="item">
										<div class=" img img_box">
											<img class="layui-circle" src="images/userp.png">
										</div>
										<p>JIANGHAN</p>
									</div>
								</li>
								<li class="layui-col-md3 layui-col-xs4">
									<div class="item" data-btn="add">
										<div class=" img img_box">
											<img class="layui-circle" src="images/add.jpg">
										</div>
										<p>新增嘉賓</p>
									</div>
								</li>
							</ul>
						</div>
						<div class="mt100 d-flex jc-s al-c">
							<a href="active7.html" class="last-btn">
								<img src="images/out1.png">返回上一步
							</a>
							<a href="active9.html">
								<button class="layui-btn layui-bg-orange next-btn">下一步</button>
							</a>
						</div>
					</from>
				</div>

			</div>
		</div>
	</main>
	<div class="layui-hide">
		<div class="addhtml ">
			<div class="active_w active8 ">
				<from class="layui-form">
					<div class=" flex-center mb60">
						<div class="user_upload">
							<div class="user_img">
								<img src="images/userp.png" id="upload-img">
							</div>
							<div id="upload-btn" class="btn">
								<img class="layui-circle" src="images/upload.png">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="label must">嘉賓姓名</div>
						<div class="">
							<input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓姓名"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="label must">職稱
						</div>
						<div class="">
							<input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓職稱"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="label must">公司名稱
						</div>
						<div class="">
							<input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓公司名稱"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="label ">嘉賓簡介
						</div>
						<div class="">
							<textarea lay-verify="required" class="layui-textarea"
								style="min-height: 3rem;">请填写嘉賓嘉簡介</textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="label ">嘉賓網址<p class=" tip1">可以加上嘉賓的 Facebook、Instagram、Twitter 等</p>
						</div>
						<div class="">
							<input type="text" name="username" lay-verify="" placeholder="请填写嘉賓網址" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<div class="mt40 d-flex jc-c al-c">
						<button class="layui-btn layui-bg-orange next-btn">新增嘉宾</button>
					</div>
				</from>
			</div>
			<div class="flex-column-center">

			</div>

		</div>
	</div>
</body>
<script src="./js/index.js"></script>
<script>

	var addhtml = $('.addhtml')[0].outerHTML;
	$(document).on('click', '[data-btn="add"]', function () {

		layui.use(function () {
			var upload = layui.upload;
			var layer = layui.layer;
			var element = layui.element;
			var $ = layui.$;

			layer.open({
				type: 1, // page 层类型
				area: ['900px', '80%'],
				title: false,
				shade: 0.6, // 遮罩透明度
				shadeClose: true, // 点击遮罩区域，关闭弹层
				anim: 0, // 0-6 的动画形式，-1 不开启
				content: addhtml
			});
			upload.render({
				elem: '#upload-btn',
				url: '', // 实际使用时改成您自己的上传接口即可。
				before: function (obj) {
					// 预读本地文件示例，不支持ie8
					obj.preview(function (index, file, result) {
						$(document).find('#upload-img').attr('src', result); // 图片链接（base64）
					});
				}

			})
			element.init();
		})

	})
</script>


</html>